// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import lodash from 'lodash';
import { ToTreeDataTable } from '@/function.js';
// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { notification } from 'antd/lib/index';
import MenuDetail from './MenuDetail';
import MenuAdd from './MenuAdd';

// css OR less预编译器

// 图片

// 通用算法

/**
 *  Created by xjc on 2019/5/15
 *  Describe:数据连接
 */

@connect(({ authority, loading }) => ({
  authority,
  loading: loading.models.AuthorityRule,
}))
@Form.create()
class MenuList extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    selectedRows: [], // 选择行
    MenuAddVisible: false, // modal开关
    MenuDetailVisible: false, // modal开关
    MenuPermissionVisible: false, // modal开关
    EditORExamine: 'Edit', // 查看还是编辑
    record: {}, // 当前行内容
  };

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:表头
   */
  columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '菜单名称',
      dataIndex: 'permissionname',
    },
    {
      title: '父级ID',
      width: 90,
      dataIndex: 'parentid',
    },
    {
      title: '菜单标识',
      dataIndex: 'permission',
    },
    {
      title: 'url',
      dataIndex: 'url',
    },
    {
      title: '菜单/按钮(1/0)',
      width: 90,
      dataIndex: 'type',
    },
    {
      title: '操作',
      width: 180,
      render: (text, record) => (
        <Fragment>
          <span>
            <a onClick={this.MenuEdit.bind(this, record)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={this.MenuDelete.bind(this, record)}>删除</a>
          </span>
        </Fragment>
      ),
    },
  ];

  /**
   *  Created by xjc on 2019/5/20
   *  Describe:编辑，删除，分配权限
   */

  MenuEdit(record) {
    this.setState({
      MenuDetailVisible: true,
      EditORExamine: 'Edit',
      record,
    });
  }

  MenuDelete(record) {
    const that = this;
    const key = `open${Date.now()}`;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          const { dispatch } = that.props;
          dispatch({
            type: 'authority/DelMenuList',
            payload: {
              id: record.id,
            },
            callback: res => {
              if (res.code === 1) {
                message.success(res.message);
                /* 导入列表数据 */
                dispatch({
                  type: 'authority/GetMenuList',
                  payload: {},
                });
              } else {
                message.warning(res.message);
              }
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否置为不可用',
      btn,
      key,
      onClose: close,
    });
  }

  closeMenuDetail() {
    const { dispatch } = this.props;
    this.setState({
      MenuDetailVisible: false,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetMenuList',
      payload: {},
    });
  }

  /**
   *  Created by xjc on 2019/5/21
   *  Describe:添加角色
   */
  addMenu() {
    const { dispatch } = this.props;
    this.setState({
      MenuAddVisible: true,
      EditORExamine: 'Edit',
    });
  }

  closeMenuAdd() {
    const { dispatch } = this.props;
    this.setState({
      MenuAddVisible: false,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetMenuList',
      payload: {},
    });
  }

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:视图
   */

  render() {
    const {
      authority: { menuData },
      loading,
    } = this.props;
    const {
      listLoading,
      selectedRows,
      MenuDetailVisible,
      MenuAddVisible,
      record,
      EditORExamine,
    } = this.state;
    const listData = {
      list: [],
    };
    if (menuData.code === 1 && menuData.list !== undefined) {
      const list = menuData.list.slice(0);
      listData.list = ToTreeDataTable(list);
    }

    return (
      <PageHeaderWrapper title="权限菜单列表">
        <Card bordered={false}>
          <Button type="primary" onClick={this.addMenu.bind(this)}>
            添加菜单
          </Button>
          <br />
          <br />
          {listData.list.length === 0 ? (
            <Empty />
          ) : (
            <StandardTable
              selectedRows={selectedRows}
              loading={listLoading}
              // defaultExpandAllRows={true}
              pagination={false}
              data={listData}
              columns={this.columns}
              rowKey="id"
              scroll={{ x: 'auto' }}
              type="checkbox"
            />
          )}
        </Card>
        {MenuAddVisible ? (
          <MenuAdd
            permissions={menuData.list}
            EditORExamine={EditORExamine}
            closeMenuAdd={this.closeMenuAdd.bind(this)}
          />
        ) : null}
        {MenuDetailVisible ? (
          <MenuDetail
            EditORExamine={EditORExamine}
            record={record}
            closeMenuDetail={this.closeMenuDetail.bind(this)}
          />
        ) : null}
        <BackTop visibilityHeight={100} />
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;

    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetMenuList',
      payload: {},
    });
  }

  componentWillUnmount() {}
}

export default MenuList;
